<template>
  <div>
    <el-card>
      <el-form size="small" :inline="true" :model="queryInfo" ref="queryFormRef">
        <el-form-item label="员工编号" prop="empId">
          <el-input v-model="queryInfo.empId" placeholder="请输入员工编号搜索"></el-input>
        </el-form-item>

        <el-form-item label="员工姓名" prop="empName">
          <el-input v-model="queryInfo.empName" placeholder="请输入员工姓名搜索"></el-input>
        </el-form-item>

        <el-form-item label="调转类型" prop="traType">
          <el-select v-model="queryInfo.traType" clearable placeholder="请选择调转类型">
            <el-option label="升职" :value="1"></el-option>
            <el-option label="降职" :value="2"></el-option>
            <el-option label="数据库错误" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary" @click="handleQuery">查 询</el-button>
          <el-button size="mini" @click="handleRest">重 置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="staTran" v-loading="loading">
        <el-table-column label="员工编号" prop="empId" width="100" align="center"></el-table-column>
        <el-table-column label="员工姓名" prop="empName" width="120" align="center"></el-table-column>
        <el-table-column label="岗位编号" prop="preStaId" width="100" align="center"></el-table-column>
        <el-table-column label="岗位名称" prop="preStaName" width="120" align="center"></el-table-column>
        <el-table-column label="调转后岗位" prop="newStaName" width="120" align="center"></el-table-column>
        <el-table-column label="调转类型" prop="traType" width="100" align="center">
          <template slot-scope="scope">{{ ["数据库错误", "升职", "降职"][scope.row.traType] }}</template>
        </el-table-column>
        <el-table-column
          label="调转原因"
          prop="traReason"
          width="180"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="备注"
          prop="traRemark"
          width="180"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="调动日期" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.createTime | formatDate }}</template>
        </el-table-column>
        <el-table-column label="操作人" prop="operName"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" @click="delStaLog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="getStaTranData"
        @current-change="getStaTranData"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size.sync="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { listStaTransFer, delStaTransLog } from "@/api/stationTran";
export default {
  data() {
    return {
      queryInfo: {
        // 当前页
        pageNum: 1,
        // 页大小
        pageSize: 10,
        //
        isAsc: "desc",
        empId: "",
        empName: "",
        traType: "",
        // 开始时间
        beginTime: undefined,
        // 结束时间
        endTime: undefined,
      },
      total: 1,
      staTran: [],
      loading: false,
      dateRange: [],
    };
  },
  methods: {
    async getStaTranData() {
      try {
        this.loading = true;
        const { data, code } = await listStaTransFer(this.queryInfo);
        if (code !== 200) return;
        this.staTran = data.staTransFers;
        console.log(this.staTran);
        this.total = data.total;
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.getStaTranData();
    },
    handleRest() {
      this.dateRange = null;
      this.$refs.queryFormRef.resetFields();
      this.getStaTranData();
    },
    delStaLog(staLog) {
      console.log(staLog.id);
      this.confirm(`删除${staLog.empName}的调动记录`, async () => {
        const { code } = await delStaTransLog(staLog.id);
        if (code !== 200) return Promise.reject();
        this.getStaTranData();
      });
    },
    // 封装应答框
    confirm(title, cb, operation = "删除") {
      this.$confirm(`此操作将${title}, 是否继续?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await cb();
            this.$message.success(`${operation}成功!`);
          } catch {
            this.$message.error(`${operation}失败!`);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${operation}`,
          });
        });
    },
  },
  created() {
    this.getStaTranData();
  },
  watch: {
    dateRange(nVal) {
      if (nVal !== null) {
        this.queryInfo.beginTime = nVal[0];
        this.queryInfo.endTime = nVal[1];
      } else {
        this.queryInfo.beginTime = undefined;
        this.queryInfo.endTime = undefined;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin: 18px 0px;
  float: right;
}
</style>
